<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        tbody .layui-table-cell{
            height:40px;
            line-height: 40px;
        }
    </style>
</head>
<body>
<div class="layui-container" style="padding-top: 30px;">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>用户列表</legend>
    </fieldset>
    <table class="layui-hide" id="test" style="width: 300px" lay-filter="test"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
    </script>
    <script src="layui/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['table','jquery'], function(){
            var table = layui.table;
            var $ = layui.jquery;
            table.render({
                elem: '#test'
                ,url:'/userApi/userList'
                ,title: '用户列表'
                ,cols: [
                    [
                        {field:'id', title: '#', sort: true,width: 60}
                        ,{field: 'picture', title: '头像',templet:img,width: 80}
                        ,{field:'userName', title: '用户名'}
                        ,{field:'nickName', title: '昵称'}
                        ,{field:'gender', title: '性别'}
                        ,{field:'telephone', title: '联系电话'}
                        ,{field:'registerDate', title: '注册日期'}
                        ,{field:'email', title: '邮箱'}
                        ,{field:'address', title: '地址'}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', align:'center'}
                    ]
                ]
                ,page: true
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){

                        var msg='删除（'+data.nickName+'）';
                        layer.prompt({title:'确认继续操作请输入右边内容：'+msg},function(val, index){
                            if (val==msg){
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close();
                                //向服务端发送删除指令
                                $.ajax({
                                    type:'DELETE',
                                    url:'/userApi/deleteUserById/'+data.id,
                                    success:function (res) {
                                        layer.close(index);
                                        layer.msg(res.data);
                                    }
                                })
                            }else{
                                layer.msg('输入有误', function(){
                                });
                            }

                        });

                }
            });

            // 表格格式化  -  img 渲染
            function img(cellvalue) {
                console.log(cellvalue);
                return "<img class=\"layui-nav-img\" src='" + cellvalue.avatar + "'/>";
            }
        });
    </script>

</div>
</body>
</html>